<template>
  <div>
    <x-header id="header" :left-options="{backText: ''}">推荐详情</x-header>
    <div class="main-header">
      <div class="process-content">
        <div class="content-status" v-if="detail.status === 1">已否决</div>
        <div class="content-status" v-else-if="detail.status === 2">初审否决</div>
        <div class="content-status" v-else-if="detail.status === 3">已放款</div>
        <div class="content-status" v-else-if="detail.status === 4">申请中</div>
        <div class="content-status" v-else-if="detail.status === 5">初审通过</div>
        <div class="content-time">{{detail.createTime}}</div>
        <div class="content-detail">该客户已通过贷款审批，放款金额：¥500000.00 感谢您的本次推荐，期待您的下次进行。</div>
      </div>
      <div class="customer">
        <div class="customer-label">客户信息</div>
        <div class="customer-row margin-bot">
          <div class="title">客户姓名</div>
          <div class="content">{{detail.applyName}}</div>
        </div>
        <div class="customer-row margin-bot">
          <div class="title">身份证号</div>
          <div class="content">{{detail.IDNumber}}</div>
        </div>
        <div class="customer-row">
          <div class="title">手机</div>
          <div class="content">{{detail.applyMobile}}</div>
        </div>
      </div>
      <div class="button">
        <x-button class="button-link" @click.native="contact">联系客户</x-button>
      </div>
    </div>
  </div>
</template>

<script>
import { progressQueryDetail } from '@/api/home'

export default {
  name: 'processDetail',
  data () {
    return {
      detail: {}
    }
  },
  methods: {
    contact () {
      window.location.href=`tel:${this.detail.applyMobile}`
    }
  },
  mounted () {
    progressQueryDetail(this.$route.query.id).then( data => {
      this.detail = data
    })
  }
}
</script>

<style scoped>
.process-content {
  background-image: url("../../../static/img/background.png");
  background-size: 100% 100%;
  height: 10.5rem;
  padding: 2rem 1rem 0;
}
.content-status {
  font-size: 24px;
  color: #FFFFFF;
  padding-bottom: 1rem;
}
.content-time {
  font-size: 12px;
  color: #FFFFFF;
  padding-bottom: 0.8rem;
}
.content-detail {
  font-size: 14px;
  color: #FFFFFF;
}
.customer {
  position: relative;
  margin: 2rem 1rem 4.5rem;
  border-radius: 4px;
  padding: 2rem 2.5rem;
  background: #fff;
}
.customer-label {
  position: absolute;
  top: -2rem;
  left: -2.5rem;
  transform: translate(50%,50%);
  border-radius: 18px;
  background: #F14E2C;
  color: #fff;
  line-height: 2.4rem;
  font-size: 12px;
  padding: 0 1rem;
}
.margin-bot {
  margin-bottom: 1rem;
}
.customer-row {
  display: flex;
}
.title {
  color: #A6A6A6;
  width: 80px;
}
.content {
  color: #A6A6A6;
}
.button {
  width: 70%;
  margin: 0 auto;
}
.button-link {
  background: #F14E2C;
  border-radius: 4px;
  color: #fff;
  font-size: 14px;
  line-height: 3rem;
}
</style>
